/*
 * @Author: jiu yin
 * @Date: 2023-04-27 14:23:19
 * @LastEditTime: 2023-11-17 16:28:15
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \ai-admin\src\comment\audio\index.tsx
 * jiu
 */
import { useState, useEffect } from "react";
import "./index.scss";

function App(props) {
   let src =
      "https://tyst.migu.cn/public/product4th/product36/2019/09/1614/2018%E5%B9%B411%E6%9C%8809%E6%97%A504%E7%82%B905%E5%88%86%E6%89%B9%E9%87%8F%E9%A1%B9%E7%9B%AESONY100%E9%A6%96-2/%E6%A0%87%E6%B8%85%E9%AB%98%E6%B8%85/MP3_128_16_Stero/6005971BLB2.mp3";

   useEffect(() => {
      onload();
   }, []);

   let onload = () => {
      let cvs = document.querySelector("canvas");
      let audio = document.querySelector("audio");
      let ctx = cvs.getContext("2d");
      let isInit = false; //是否初始化
      let isPlay = false; //是否播放
      let dataArr, analyzer; //存数据的数组 分析器

      audio.onplay = function (e) {
         isPlay = true;
         draw();
         if (isInit) return; //初始化成功就不用初始了
         const audCtx = new AudioContext(); //创建音频上下文

         // const source = audCtx.createMediaElementSource(audio) //此方法被createBufferSource取代

         const audioSrc = props.src || "";

         fetch(audioSrc)
            .then(response => response.arrayBuffer())
            .then(buffer => audCtx.decodeAudioData(buffer))
            .then(decodedData => {
               const audioSrcNode = audCtx.createBufferSource();
               audioSrcNode.buffer = decodedData;
               audioSrcNode.start();

               analyzer = audCtx.createAnalyser(); //创建分析器
               analyzer.fftSize = 512; //分析器的窗口大小 越大越细腻 必须是2次方
               dataArr = new Uint8Array(analyzer.frequencyBinCount); //表示item无符号8位整数 刚好一byte 字节
               audioSrcNode.connect(analyzer); //音频源 连接 分析器
               //audCtx.destination  输出设备
              //  analyzer.connect(audCtx.destination); //分析器连接到输出设备
               isInit = true;
               draw();
            })
            .catch(error => console.error(error));
         // const source = audCtx.createMediaElementSource(audio) //创建音频源
      };
      audio.onpause = function () {
         isPlay = false;
      };
      //绘制
      //绘制
      function draw() {
         if (!isPlay) return; //暂停
         if (!isInit) return; //没有初始化也停止
         //清空画布
         const { width, height } = cvs;
         ctx.clearRect(0, 0, width, height);
         analyzer.getByteFrequencyData(dataArr); //让分析器节点分析出的数据到数组中
         let len = dataArr.length / 2;
         console.log(len);
         let baseWidth = width / len / 2; //每条树状的宽度 都是一样的
         ctx.fillStyle = "#98c602";

         for (let i = 0; i < len; i++) {
            let item = dataArr[i]; //由于是一字节 肯定是小于256的
            let baseHeight = (item / 255) * height; //最大值255 那么就有canvas高  数大小比列
            let x = i * baseWidth + width / 2;
            let y = height - baseHeight;
            ctx.fillRect(x, y, baseWidth, baseHeight);
            let x1 = width / 2 - (i + 1) * baseWidth;
            ctx.fillRect(x1, y, baseWidth, baseHeight);
         }

         // console.log(dataArr);
         // console.count();
         requestAnimationFrame(draw);
      }
   };

   return (
      <div className="audio_warp">
         <canvas width={600} height={300}></canvas>
         <div className="audio">
            <audio src={props.src || ""} controls></audio>
         </div>
      </div>
   );
}

export default App;
